<template>
  <div class="home" @scroll="scroll">
    <cols-header v-show="show" class="fixed"></cols-header>
    <div class="content" @click="goSign">
      <!-- 在input标签上v-model相当于 v-bind @input 的集合-->
      <!-- 在select标签上v-model相当于 v-bind @change 的集合-->
      <!-- <my-input v-model="text" type="password" placeholder="请输入账号"></my-input>
      <my-button type="primary">点击</my-button>
      <my-button type="danger">搜索</my-button>
      <my-button type="warn">保存</my-button>
      <my-button>确认</my-button> -->
      <my-swiper :banners="banners"></my-swiper>
    </div>
  </div>
</template>

<script>
import colsHeader from '@/components/colsHeader/colsHeader.vue'
import myInput from '@/components/myInput/myInput'
import myButton from '@/components/myButton/myButton'
import mySwiper from '@/components/mySwiper/mySwiper'
import { getBanners } from '@/utils/api/home'
export default {
  name: 'Home',
  components: {
    colsHeader,
    myInput,
    myButton,
    mySwiper
  },
  data() {
    return {
      show: false,
      text: '',
      banners: []
    }
  },
  created() {
      // 请求轮播图数据
      getBanners().then(res => {
        // console.log(res)
        this.banners = res
      })
  },
  methods: {
    scroll(e) {
      this.show = e.target.scrollTop > 500 ? true : false
    },

    goSign() {
      // this.$router.push({
      //     name: 'homeSign'
      // })
    }
  }
}
</script>
<style lang="scss">
  .home{
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    .content{
      height: 2000px;
      // background-image: linear-gradient(blue, red, green);
    }
    .fixed{
      position: fixed;
      top: 0;
      left: 0;
    }
  }
</style>
